<template>
  <div style="width: 70%; float: left; margin-left: 200px">
    <el-icon style="float: left; cursor: pointer" @click="returnBefore"
      ><ArrowLeftBold
    /></el-icon>
  </div>
  <div class="personalInfo">
    <div class="background-img-box">
      <el-image class="background-img" :src="url" />
    </div>
  </div>

  <div class="top">
    <div class="personal-img-box">
      <el-image class="personal-img" :src="userMessage.headImag" />
    </div>

    <el-row>
      <el-col :span="4">{{ userMessage.nickName }}</el-col>
      <el-col :span="3">
        <el-tag class="ml-2" type="warning">{{
          userMessage.sex
        }}</el-tag></el-col
      >
      <el-col :span="3">
        <el-tag class="ml-2" type="warning">{{
          userMessage.city
        }}</el-tag></el-col
      >
      <el-col :span="3" @click="wanshan" v-if="isMe">
        <el-tag class="ml-2" type="warning">
          <el-icon><EditPen /></el-icon>完善信息</el-tag
        ></el-col
      >
      <el-col :span="3" @click="changePassword" v-if="isMe">
        <el-tag class="ml-2" type="warning">
          <el-icon><EditPen /></el-icon>修改密码</el-tag
        ></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="4">ID号:{{ userMessage.userId }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4">{{ userMessage.info }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="2">{{ userMessage.fans }}</el-col>
      <el-col :span="2">{{ userMessage.picks }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="2"
        ><myfans
          :userId="userIDfocus.query.userId"
          @shuaxinPage="shuaxinPage"
        ></myfans
      ></el-col>
      <el-col :span="2"
        ><focus
          :userId="userIDfocus.query.userId"
          @shuaxinPage="shuaxinPage"
        ></focus
      ></el-col>
    </el-row>
    <br />
    <br />
  </div>
  <div class="biaoqian">
    <el-tabs type="border-card" class="demo-tabs" style="width: 100%">
      <el-tab-pane label="已发布" style="width: 100%; left: 0px" @click="test1"
        ><pInfor :foo="myBlog"></pInfor>
      </el-tab-pane>
      <el-tab-pane label="动态" :tab-click="test2"
        ><pInfor :foo="otherBlog"></pInfor
      ></el-tab-pane>
      <el-tab-pane label="喜欢" @click="test3"
        ><pInfor :foo="likeBlog"></pInfor
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { EditPen, ArrowLeftBold } from '@element-plus/icons-vue'
import pInfor from '../components/firstPage/pInfor.vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { onMounted, ref } from 'vue'
import router from '@/router'
import focus from '../components/information/focus.vue'
import myfans from '../components/information/myfans.vue'
const userIDfocus = useRoute()
const userMessage = ref([])
const myBlog = ref([])
const otherBlog = ref([])
const likeBlog = ref([])
const isMe = ref(false)

function wanshan() {
  router.push('wanshan?userId=' + userIDfocus.query.userId)
}

console.log(userIDfocus.query.userId)
onMounted(() => {
  myInfor()
  test1()
  test2()
  test3()
  ISmyself()
})

function ISmyself() {
  if (userIDfocus.query.userId === localStorage.getItem('userSelfId')) {
    isMe.value = true
  }
}
function changePassword() {
  router.push('changepassword')
}
function myInfor() {
  axios({
    url: 'http://localhost:8080/user/otherinfo/' + userIDfocus.query.userId,
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    userMessage.value = res.data.data[0]
    console.log('个人信息' + JSON.stringify(userMessage.value))
  })
}
function shuaxinPage(index) {
  myInfor()
  test1()
  test2()
  test3()
  ISmyself()
}
function test1() {
  axios({
    url:
      'http://localhost:8080/user/myHomepageMyBlog/' + userIDfocus.query.userId,
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    myBlog.value = res.data.data
  })
}
function test2() {
  axios({
    url:
      'http://localhost:8080/user/myHomepageOtherBlog/' +
      userIDfocus.query.userId,
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    otherBlog.value = res.data.data[0].dynamicList
  })
}
function test3() {
  axios({
    url:
      'http://localhost:8080/user/myHomepageMyLikeBlog/' +
      userIDfocus.query.userId,
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    likeBlog.value = res.data.data[0].dynamicList
  })
}

function returnBefore() {
  router.go(-1)
}
const url =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
</script>

<style lang="scss">
.hanhui {
  width: 70%;
  position: absolute;
  left: 0;
}
.personalInfo {
  width: 100%;
}
.background-img-box {
  width: 73%;
  align-items: center;
  margin-left: 200px;
  padding: 0 1px;
  z-index: 19;
}
.background-img {
  width: 100%;
  height: 200px;
}
.top {
  width: 70%;
  align-items: center;
  margin-left: 150px;
  position: absolute;
  top: 140px;
  left: 0;
  background: #ffffff;
  z-index: 20;
  height: 90px;
  margin-top: 100px;
}
.personal-img-box {
  align-items: center;
  width: 70%;
  display: flex;
  margin-left: 40px;
  margin-top: -50px;
}
.personal-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  z-index: 20;
  border: 3px solid #ffffff;
}
.biaoqian {
  width: 70%;
  align-items: center;
  margin-left: 200px;
  margin-top: 230px;
}
</style>
